<template>
  <div class="student">
      <h2>学生姓名：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>
    <h2>当前求和为{{number}}</h2>
    <button @click="numberHE">点我number++</button>
    <button @click="sendStudentName">点击向app发送name</button>
    <button @click="unbind">解绑atguigu事件</button>
    <button @click="death">销毁当前student</button>
  </div>
</template>

<script>


export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: "Student",
  data(){
    return{
      sex:'男',
      name:'张三',
      number:0
    }
  },

  methods:{
    sendStudentName(){
      // $emit 触发自定义事件，触发Student组件实例对象的atguigu事件
      this.$emit('atguigu',this.name)
      // this.$emit('demo')
    },
    unbind(){
      //解绑一个自定义事件
      this.$off('atguigu')
    //  若解绑多个事件
    //   this.$off(['atguigu','demo'])
    //  解绑所有的
    //   this.$off()
    },
    death(){
      this.$destroy()
      //销毁了当前的Student组件的实例(自定义组件,但原生的不受影响，只是页面不受vm管理了)
    },
    numberHE(){
      this.number++
    }
  }


}
</script>
<!--因为无论多少个组件 最后样式都是放在一起，所以会出现组件命名冲突
scoped 表示此样式只负责自己组件里  {
        若app里写样式则不需加scoped ，因为app组件是头，里面写样式任何子组件都可以用
}

-->
<style scoped lang="less">
    .student{
      background-color: orange;
      padding: 10px;
    }
</style>